<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>出勤排班表管理</title>
<link href="<%=request.getContextPath()%>/public/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/public/css/styles.css" />
<link rel="stylesheet" href="<%=request.getContextPath()%>/public/css/simple.css" />
<link href="<%=request.getContextPath()%>/public/jquery-ui-1.10.3.custom/css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="<%=request.getContextPath()%>/public/fullcalendar/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/public/fullcalendar/fullcalendar.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/public/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/public/DatePicker/WdatePicker.js"></script>

<script type="text/javascript">
	$.ajaxSetup({ cache: false });
	$(document).ready(function() {
	
		var user_sessionid = $('#user_sessionid').val();
		//alert(user_sessionid);
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();

		$('#calendar').fullCalendar({
			
			// set options
			header:{
				right: 'prev,next today',
				center: 'title',
				left: ''
				//left: 'month,agendaWeek,agendaDay'
			},
			firstDay:1,
			buttonText: {
				prev: '上个月',
				next: '下个月',
				today: '今天'
			},
			weekMode:'fixed',
			monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
			dayNames:['星期日', '星期一', '星期二', '星期三','星期四', '星期五', '星期六'], 
			dayNamesShort:['周日', '周一', '周二', '周三','周四', '周五', '周六'],
			
			//day callback function
			dayClick: function(date, allDay, jsEvent, view) {
				var currentlyDate = new Date();
				var currentDateStr = currentlyDate.format('yyyy-MM-dd');
				
				var arr1 = currentDateStr.split("-");   
				var date1 = new Date(arr1[0],parseInt(arr1[1])-1,arr1[2]);   
				 
				var clickDateStr = date.format('yyyy-MM-dd');
				var arr2 = clickDateStr.split("-");   
				var date2 = new Date(arr2[0],parseInt(arr2[1])-1,arr2[2]);
				
				if(date2 >= date1){
					window.location = "getallwsd?user_sessionid=" + user_sessionid + "&workDate=" + date.format('yyyy-MM-dd');
				}
				
			},
			draggable:true,
			
			//events
			events: function(start, end, callback){
				
				$.getJSON('getWorkScheduleByDate!findWorkSchedule',{startDate:start.format('yyyy-MM-dd'),endDate:end.format('yyyy-MM-dd'), user_sessionid:user_sessionid},
						function(data){
							var events = [];
							if(data != "{}"){
								var termMap = eval(data);
								$.each(termMap, function(key,value){
									if(key == 'start'){
										value = new Date(Date.parse(value));
									}
									//alert("value : " + value);
									events.push(value);
								});
							}
							callback(events);
						});
			},
			//eventMouseover: function(data, event, view) {
				/*
				var content = '<h3>'+data.title+'</h3>' + 
					'<p><b>Start:</b> '+data.start+'<br />' + 
					(data.end && '<p><b>End:</b> '+data.end+'</p>' || '');
				*/
				/*
				var content = '<table><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>';
				tooltip.set({
					'content.text': content
				})
				.reposition(event).show(event);
			},*/
			
			eventClick: function(calEvent, jsEvent, view) {
				
				$("#workScheduleDetails").dialog({
					autoOpen: false,
					//title: '详细信息('.concat(calEvent.start).concat(')'),
					width: 400,
					modal: true,
					buttons: {
						'取消': function() {
							$(this).dialog('close');
						}
					}
				});
				$(".ui-dialog-titlebar").hide();
				function getDetailDataByDateType(){
					$.getJSON("getWorkScheduleByDate!findWorkScheduleByDayType",{workingDate:calEvent.start.format('yyyy-MM-dd'),workingType:calEvent.id,user_sessionid:user_sessionid},
					
					function(data){  
						$("#workScheduleDetails").empty();
						var strHTML = '<table id="borderedshell" width="100%" cellspacing="1" cellpadding="0">' +  
						'<tbody>' +
	   					'<tr class="darkblueodd" valign="top"><!-- th class="whitezi" width="20">ID</th--><th class="whitezi" width="40">员工号</th><th class="whitezi" width="40">姓名</th></tr>';  
	    				var i = 0;
						$.each(data,function(InfoIndex,Info){
							i++;
			                strHTML += '<tr class="odd">';
			                //strHTML += '<td><div align="left">'+ i +'</div></td>';
			                strHTML += '<td><div align="left">'+Info["employeeId"]+'</div></td>';
			                strHTML += '<td><div align="left">'+Info["employeeName"]+'</div></td>';
			                strHTML += '</tr>';
			            });
						$("#workScheduleDetails").html(strHTML +='</tbody></table>');
					});
				};
				getDetailDataByDateType();
				$("#workScheduleDetails").dialog('open');
			},
			
			//mouseover event call back function
			//eventMouseover: function(event, jsEvent, view ) { 
				//alert('Event: ' + event.title);
				//alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
			//},
			
			eventMouseout:function( event, jsEvent, view ) { 
			
			}
		});
		
		var datePicker = '<input type="text" style="width:80px; height:20px" id="selecteddate" type="text" onClick="WdatePicker()" />' +
		'<a id="changeDate" href="#">搜索</a><span class="fc-header-space"></span>';
		
		$('.fc-header-right span:eq(0)').before(datePicker);
		$("#changeDate").click(function() {
			var selectdstr = $("#selecteddate").val();	
			var selectdate = $.fullCalendar.parseDate(selectdstr, "yyyy-mm-dd");					
			$('#calendar').fullCalendar( 'gotoDate', selectdate.getFullYear(), selectdate.getMonth(), selectdate.getDate());
		});
		
	});
    
	
	
	Date.prototype.format = function(format)
	{
	 var o = {
	 "M+" : this.getMonth()+1, //month
	 "d+" : this.getDate(),    //day
	 "h+" : this.getHours(),   //hour
	 "m+" : this.getMinutes(), //minute
	 "s+" : this.getSeconds(), //second
	 "q+" : Math.floor((this.getMonth()+3)/3),  //quarter
	 "S" : this.getMilliseconds() //millisecond
	 }
	 if(/(y+)/.test(format)) format=format.replace(RegExp.$1,
	 (this.getFullYear()+"").substr(4 - RegExp.$1.length));
	 for(var k in o)if(new RegExp("("+ k +")").test(format))
	 format = format.replace(RegExp.$1,
	 RegExp.$1.length==1 ? o[k] :
	 ("00"+ o[k]).substr((""+ o[k]).length));
	 return format;
	}
	
	
</script>
</head>
<body>
<div id="document">	
			<div id="head">
				<table cellspacing="0" cellpadding="0" border="0" width="100%">
					<tr valign="top">
						<td>
							<!--<a href="#"><img src="../images/monogram.gif" alt="" width="213" height="57" /></a>-->
						</td>
						<td valign="middle">
							<div id="util">								
								<table cellspacing="0" cellpadding="0" border="0">
									<tr valign="middle">
										<td>用户:<s:property value="username"/></td>
										<td>&nbsp;&nbsp;</td>
										<td><a href="logout">退出</a></td>					
									</tr>
								</table>
					  		</div>				
						</td>
					</tr>
				</table>
			</div>
			<div id="nav1">
				<table cellspacing="0" cellpadding="0" border="0">
					<tr valign="middle">
						<td id="searchCell"></td>
						<td><img src="<%=request.getContextPath()%>/public/images/nav1Link.gif" alt="" width="9" height="8" />
							<a href="getWorkScheduleByDate?user_sessionid=<s:property value='%{user_sessionid}'/>">排班管理</a>
						</td>
						<td><img src="<%=request.getContextPath()%>/public/images/nav1Link.gif" alt="" width="9" height="8" /><a href="passwordSettingAction?user_sessionid=<s:property value='%{user_sessionid}'/>">密码设置</a></td>
						<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
					</tr>
			    </table>
			</div>
			<table border="0" cellpadding="0" cellspacing="0">
				<tr valign="top">
					<td id="navCell">
						<div  id="nav2">
							<ul class="breadcrumb">
								<li><a href="#">排班作业</a></li>
							</ul>
							<ul class="navitemList">
								<li><a href="wssetting?user_sessionid=<s:property value='%{user_sessionid}'/>">班表设置</a></li>
								<li><a href="getWorkScheduleByDate?user_sessionid=<s:property value='%{user_sessionid}'/>">出勤排班表管理</a></li>
							</ul>
						</div>
					</td>
					<td id="mainCell">
						<h2 id="pageTitle" class="mainTitle">出勤排班表管理</h2>
						<div id='calendar'></div>
						<div id="workScheduleDetails"></div>  
						<s:hidden name="user_sessionid" value="%{user_sessionid}"></s:hidden>
					</td>
				</tr>
		  </table>	
			<div id="foot">
				<p>Copyright JINMEINOW  2013</p>
			</div>
		</div>
</body>

</body>
</html>